<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            width: 750px;
            margin: 0 auto;
        }
        ul{
            display: flex;
        }
        ul > li{
            width: 80px;
            height: 250px;
            overflow: hidden;
            transition: width .5s linear;
            position: relative;
        }
        /* li.span {
            width: 40px;
            height: 40px;
            background-color: gray;
        }
        li.span.p{
            font-size: 40px;
        } */
        p {
            width: 60px;
            height: 60px;
            font-size: 48px;
            line-height: 64px;
            text-align: center;
            color: pink;
            background-color: rgb(49, 46, 46);
            position: absolute;
            top: 20px;


        }
        img{
            display: block;
            width: 400px;
            height: 300px;
        }
        ol{
            display: flex;
        }
        ol > li{
            width: 10px;
            height: 10px;
            margin: 10px;
            background-color: aquamarine;
        }
        ol > li:first-child{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
        
        var ul = document.querySelector("ul");
        var str = "https://www.jq22.com/demo/jquerylbqh201910210040/images/0";
        var str1 = '';
        for (var i = 1; i <= 6; i++) {
            var url = str + i + ".png" ;
            str1 += `<li>
                    <img src="${url}" alt="tu">
                    <p>${ i}</p>
                </li>`
        }
        ul.innerHTML = str1;
        
        var lis = document.querySelectorAll("ul > li");
        var ollis = document.querySelectorAll("ol > li");
        var lip = document.querySelectorAll("p");

        lis[0].style.width = "400px";
        lip[0].style.opacity = '0';
        for(var i = 0;i < lis.length;i++){

            lis[i].ind = i; //lis[0].ind = 0; lis[1].ind = 1; lis[2].ind = 2;...
            
            lis[i].onmouseenter = function(){
                
                for(var k = 0;k < lis.length;k++){
                    lis[k].style.width = "80px";
                   
                    ollis[k].style.backgroundColor = "aquamarine";
                    lip[k].style.opacity= '1';
                }                
                console.log(this.ind);

                ollis[this.ind].style.backgroundColor = "red";
                lip[this.ind].style.opacity = '0';
                this.style.width = "400px";
            }
        }
        // var lip = document.querySelectorAll("li.p");
        // lip[k].style.backgroundColor= 'gray';
        // lip[this.ind].style = 'display:none';
    </script>
    
</body>
</html>